<template>
	<view class="my-info-page">
		<view class="info-area">
			<view class="area-sty">
				<view>姓名：{{studentData.stdNm}}</view>
				<view>年龄：{{studentData.age}}</view>
				<view>性别：{{studentData.gender == 0?'女':'男'}}</view>
				<view>身高：{{studentData.height||''}}</view>
				<view>体重：{{studentData.weight||''}}</view>
			</view>
			<view class="area-sty" style="text-align: right;">
				<img style="width: 158px;height: 188px;" :src="studentData.headImg" alt="">
			</view>
		</view>
		<view class="info-area-b">
			<view @click="pageFla" :class="fla ? 'isTab':''">学员各项指标</view>
			<view @click="pageFla" :class="!fla ? 'isTab':''">签到详情</view>
		</view>
		<view>
			<view v-show="fla" class="echarts-wrap">
				<view class="container">
					<uni-ec-canvas :ec="ec" ref="canvas" canvas-id="multi-charts-pie"></uni-ec-canvas>
				</view>
			</view>
			<view v-show="!fla">
			</view>
		</view>
	</view>
</template>

<script>
	import uniEcCanvas from '@/components/uni-ec-canvas/uni-ec-canvas.vue'
	import * as echarts from '@/components/uni-ec-canvas/echarts.js'
	const db = uniCloud.database()
	let chart = null
	export default {
		components: {
			uniEcCanvas,
		},
		data() {
			return {
				studentData: {},
				fla: true,
				beforData: [],
				afterData: [],
				ec: {
					option: {}
				}
			}
		},
		onLoad(e) {
			this.getStudentData(e)
		},
		methods: {
			getStudentData(e) {
				const _this = this
				const item = JSON.parse(e.parm)
				const where = `"learnerId"=="${item.learnerId}"`
				return db.collection('student-MGMT').where(where)
					.field( // heightN,weightN,speed,speed暂不需要
						'properties,portrait,stdNm,age,gender,height,weight,endurance,explosiveness,bounce,shooting,dribbling,enduranceN,explosivenessN,bounceN,shootingN,dribblingN'
					)
					.get().then((res) => {
						const data = res.result.data[0]
						if (data) {
							const file = data.portrait.split(',')
							this.studentData = data
							this.studentData.learnerId = item.learnerId
							this.studentData.headImg = `${this.$baseImgUrl}${file[0]}`
							this.beforData = [data.endurance, data.explosiveness, data.bounce, data.shooting, data
								.dribbling
							]
							this.afterData = [data.enduranceN, data.explosivenessN, data.bounceN, data.shootingN,
								data.dribblingN
							]
							this.$refs.canvas.setOption(this.getOption(this.beforData, this.afterData), true);
						}
						console.log(res)
					}).catch((err) => {
						uni.showModal({
							content: err.message || '请求服务失败',
							showCancel: false
						})
					})
			},
			pageFla() {
				this.fla = !this.fla
				if (this.fla) {} else {

				}
			},
			getOption(bArr, aArr) {
				const op = {
					color: ['#5470c6', '#91cc75', '#fac858', '#ee6666', '#73c0de', '#3ba272', '#fc8452', '#9a60b4',
						'#ea7ccc'
					],
					title: {
						text: '' // 学员各项指数
					},
					tooltip: {
						trigger: 'axis'
					},
					legend: {
						left: 'center',
						textStyle: {
							fontSize: 20
						},
						data: [
							'训练前',
							'训练后'
						]
					},
					radar: [{
						indicator: [{
								text: '弹跳',
								max: 100
							},
							{
								text: '投篮',
								max: 100
							},
							{
								text: '控球',
								max: 100
							},
							{
								text: '速度',
								max: 100
							},
							{
								text: '耐力',
								max: 100
							}
						],
						radius: 150, // 设置半径调整图形的大小
						center: ['50%', '60%']
					}],
					series: [{
						type: 'radar',
						radarIndex: 0,
						areaStyle: {},
						data: [{
								value: bArr, // bArr,
								name: '训练前'
							},
							{
								value: aArr, // aArr,
								name: '训练后'
							}
						]
					}]
				}
				return op
			}
		}
	}
</script>

<style lang="less" scoped>
	.my-info-page {}

	.info-area,
	.info-area-b {
		display: flex;
	}

	.info-area view {
		flex: 1;
		font-size: 32rpx;
		font-weight: 500;
		padding: 8px;
	}

	.info-area-b view {
		flex: 1;
		text-align: center;
		line-height: 50px;
		font-size: 36rpx;
		font-weight: 600;
	}

	.isTab {
		color: #fc993b;
	}
	.echarts-wrap {
		// transform: scale(0.76);
	}

	.container {
		margin-top: 20px;
		width: 750rpx;
		height: 750rpx;
	}
</style>